import React from 'react';

import './details.less'

class LyricAlbum extends React.Component {
    state = {
        showState: "展开",
    };
    render() {
        return <div className='lyricAlbum'>
            {/* 专辑封面和歌词区域↑ */}

            {/* 上部主区域 */}
            <div className="topContent">
                {/* 左侧专辑图片 */}
                <div className="album">
                    {/* 专辑封面 */}
                    <div className="cover">
                        <img src="http://p1.music.126.net/JwUTCEySzPijv-qtzeScPQ==/109951163240621579.jpg?param=130y130" alt="" />
                        <div className="mask"></div>
                    </div>
                    {/* 生成外链播放器 */}
                    <div className="outerPlayer">
                        <i className="icon music"></i>
                        <a href="" className="des">生成外链播放器</a>
                    </div>
                </div>

                {/* 右侧歌词区域 */}
                <div className="lyric">
                    {/* 头部 */}
                    <div className="head">
                        <i className="icon single"></i>
                        {/* 歌曲名字 */}
                        <div className="title">可惜不是你</div>
                        <a href="" className="icon mv" title="播放MV"></a>
                    </div>
                    {/* 歌曲信息 */}
                    <p className="songInfo">歌手：<a href="" className="info">梁静茹</a></p>
                    <p className="songInfo">所属专辑：<a href="" className="info">丝路</a></p>
                    {/* 操作按钮 */}
                    <div className="buttons">
                        <button className=" play" title="播放">播放</button>
                        <button className=" add" title="添加到播放列表"></button>
                        <button className=" collect">
                            收藏
                        <i className="button"></i>
                        </button>
                        <button className=" share">
                            分享
                        <i className="button"></i>
                        </button>
                        <button className=" download">
                            下载
                        <i className="button"></i>
                        </button>
                        <button className=" comments">
                            <span className="num">(27030)</span>
                            <i className="button"></i>
                        </button>
                    </div>
                    {/* 歌词 */}
                    <div className="lyricContent">
                        歌词内容
                        <div className="showMore">
                            <a href="" className="showText">
                                {this.state.showState}
                                <i className="icon downArrow"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            {/* 下方歌词贡献和报错 */}
            <div className="info">
                <p><a href="" className="songInfo">上传歌词</a> &nbsp; <a href="" className="error">报错</a></p>
            </div>
        </div>;
    }
}

export default LyricAlbum